<template>
  <el-dialog :model-value="visible" @update:model-value="handleVisibleChange" title="选择商品" width="800px"
    destroy-on-close append-to-body>
    <el-form :model="form" inline>
      <el-form-item label="商品类别：">
        <el-select v-model="form.category" placeholder="请选择类别" clearable style="width: 160px;">
          <el-option label="服务器" value="server" />
          <el-option label="电脑" value="computer" />
          <el-option label="其他" value="other" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input v-model="form.keyword" placeholder="输入编号/名称查询" style="width: 250px;" @keyup.enter="searchProducts" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="searchProducts">搜索</el-button>
        <el-button type="warning" style="margin-left: 10px" @click="clearSelection">
          清空选择
        </el-button>
      </el-form-item>
    </el-form>

    <el-table :data="processedProductList" border height="300px" ref="productTable"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column prop="name" label="商品名称" width="150" />
      <el-table-column prop="code" label="商品编号" width="120" />
      <el-table-column prop="category" label="商品类别" width="100" />
      <el-table-column prop="brand" label="品牌" width="100" />
      <el-table-column prop="unit" label="单位" width="80" />
      <el-table-column prop="availableStock" label="可用库存" width="100" />
      <el-table-column prop="wholePackage" label="整件散包" width="100" />
    </el-table>

    <div style="margin-top: 10px; font-size: 14px; color: #606266;">
      已选中 {{ selectedCount }} 个商品
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="confirmSelect">确定</el-button>
        <el-button @click="handleCancel">取消</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
/* eslint-env vue/setup-compiler-macros */
import { ref, computed, watch } from 'vue'
const props = defineProps({
  visible: {
    type: Boolean,
    required: true
  },
  dataSource: {
    type: Array,
    default: () => []
  },
  selected: {
    type: Array,
    default: () => []
  }
})

const emit = defineEmits(['update:visible', 'confirm', 'cancel'])

// 搜索表单
const form = ref({
  category: '',
  keyword: ''
})

// 选中商品
const selectedProducts = ref([])

// 初始化选中项
selectedProducts.value = props.selected || []

// 过滤商品列表
const processedProductList = computed(() => {
  return props.dataSource.filter(item => {
    const byCategory = !form.value.category || item.category === form.value.category
    const byKeyword = !form.value.keyword || item.name.includes(form.value.keyword) || item.code.includes(form.value.keyword)
    return byCategory && byKeyword
  })
})

// 选中数量
const selectedCount = computed(() => selectedProducts.value.length)

// 监听外部 selected 变化
watch(() => props.selected, (val) => {
  selectedProducts.value = val || []
}, { deep: true })

// 处理 visible 变化（通过事件）
const handleVisibleChange = (val) => {
  emit('update:visible', val)
}

// 搜索
const searchProducts = () => { }

// 清空选择
const clearSelection = () => {
  selectedProducts.value = []
}

// 选择变化
const handleSelectionChange = (val) => {
  selectedProducts.value = val
}

// 确定
const confirmSelect = () => {
  emit('confirm', selectedProducts.value)
  emit('update:visible', false)
}

// 取消
const handleCancel = () => {
  emit('cancel')
  emit('update:visible', false)
}


</script>